<template>
  <view style="min-height: 30vh">
    <view class="bg-white">

      <view class="flex justify-between padding solid-bottom">
        <view class="text-black">
          <text v-if="articleId">添加到收藏集</text>
        </view>
        <view class="text-blue" @click="open">+新建收藏集</view>
      </view>
      <view>
        <view v-for="(cate,index) in categories" :key="cate.id">
          <view class="padding solid-bottom flex justify-between align-center">
            <view @click="clickCollection(cate.id, index)" class="flex-sub">
              <view class="padding-bottom-sm">{{ cate.name }}</view>
              <view class="text-sm text-grey">{{ Array(...cate.collections).length }}个内容</view>
            </view>

            <view class="flex justify-center">
              <view class="padding-left-lg" @click="deleteCollectionCategory(cate.id)">
                <image style="width:40upx" mode="widthFix" src="../../static/icons/delete.svg"></image>
              </view>
            </view>
          </view>

          <view v-if="showCollections[index]">
            <view v-for="collect in cate.collections">
              <view class="padding-lr solid-bottom flex justify-between align-center">
                <view class="flex padding align-center flex-sub" @click="toArticle(collect.article.id)">
                  <view class="text-blue">{{String(collect.article.title).substring(0,15)}}</view>
                  <view class="margin-left-sm text-sm text-grey">{{String(collect.published_at).substring(0,10)}}</view>
                </view>
                <view @click="deleteCollection(collect.id)">
                  <image style="width:40upx" mode="widthFix" src="../../static/icons/collection-yellow.svg"></image>
                </view>
              </view>
            </view>
          </view>

        </view>
      </view>
    </view>
    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog title="新建收藏集" placeholder="请输入收藏集名字 " mode="input" :duration="2000" :before-close="true"
                        @close="close" @confirm="confirm"></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
export default {
  props: {
    emits:['createCollectionSucceed'],
   articleId:{
     type:[Number, String],
     required:false
   }
  },
  data() {
    return {
      collections:[],
      showCollections: [],
      categories: []
    };
  },
  mounted() {
    this.getCollectionCategory()
  },
  methods: {
    toArticle(id) {
      uni.navigateTo({
        url: '../article/article?id=' + id,
      })
    },
    open() {
      this.$refs.popup.open()
    },
    close() {
      this.$refs.popup.close()
    },
    confirm(value) {
      this.$api.createCollectionCategory({
        name: value
      }).then(res => {
        console.log(res)
        this.getCollectionCategory()
      })
      this.$refs.popup.close()
    },
    getCollectionCategory() {
      this.$api.getCollectionCategory().then(res => {
        this.categories = res
        console.log(this.categories)
      })
    },
    deleteCollectionCategory(id) {
      this.$api.deleteCollectionCategory(id).then(res => {
        console.log(res)
        this.getCollectionCategory()
      })
    },
    clickCollection(categoryId, index) {
      if (this.articleId) {
        this.$api.createCollection({
          article: this.articleId,
          category: categoryId
        }).then(res => {
              console.log(res)
          this.$emit('createCollectionSucceed')
            })
      }else{
        console.log(index)
        console.log(this.showCollections[index])
        this.$set(this.showCollections, index, !Boolean(this.showCollections[index]))
      }
    },
    deleteCollection(id){
      this.$api.deleteCollection(id).then(res => {
        console.log(res)
      }).then(() => {
        this.getCollectionCategory()
      })
    }
  }
}
</script>

<style lang="scss">

</style>
